<%--
  Created by IntelliJ IDEA.
  User: Gz
  Date: 2021/12/13
  Time: 18:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>找回密码</title>
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    <%--js代码--%>

    <script>
        var i=60;
        $(function () {
            /***获取邮箱验证码***/
            $('#btn1').click(function () {
                var mail=$("[name='email']").val();

                clickTime();
                $.post("user",{"method":"yzyx","yzm":mail});
            });

            /****提交整个表单****/
            $('#btn2').click(function () {
                $.ajax({
                    url:"user?method=forget",
                    type:"post",
                    data:$('#frm').serialize(),
                    success:function (data) {
                        let val=data;
                        switch (val) {
                            case "没有此邮箱用户":
                                $('#err').html("没有此邮箱用户");
                                break;
                            case "验证码输入错误":
                                $('#err').html("验证码输入错误");
                                break;
                            case "用户名填写错误":
                                $('#err').html("用户名填写错误");
                                break;
                            case "完成":
                                window.location.href="sign.jsp";
                                break;
                        }
                    }
                })
            })
        });

        function clickTime() {
            i--;
            if(i<=1){
                $('#btn1').html("重新获取验证码");
                $.get("user",{"method":"removeyzm"})
            }else {
                setTimeout(function () {
                    $('#btn1').html(i+"秒内请输入验证码")
                    clickTime();
                },1000);
            }

        }

    </script>
    <style type="text/css">
        body,html{
            margin: 0;
            padding: 0;
            background-image: url(img/signbg.jpg);
        }
        #content{
            width: 500px;
            height: 400px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /*background: aqua;*/
            border: black solid 7px;
            border-radius: 19px;
            box-shadow:  20px 20px 10px 10px black;
        }
    </style>
</head>
<body>
<div id="content">

    <div style="width: 100%;height: 60px;text-align: center;font-size: 30px;font-weight: bold;font-family: '隶书';">找回密码</div>
    <div style="width: 100%;">
        <form action="" id="frm">
            <table align="center">
                <tr>
                    <td colspan="2" id="err" style="text-align: center;color: red">&nbsp;</td>
                </tr>
                <tr>
                    <td>用户名：</td>
                    <td>
                        <input type="text" name="name" placeholder="请输入用户名" />
                    </td>
                </tr>
                <tr>
                    <td>请输入邮箱：</td>
                    <td><input type="email" name="email" placeholder="请输入邮箱"></td>
                </tr>
                <tr>
                    <td>
                        <span type="button" id="btn1" style="text-align: center;background-color: gray;width: 15px;height: 5px">获取验证码</span>
                    </td>
                    <td>
                        <input type="text" name="yzm" placeholder="请输入验证码" />
                    </td>
                </tr>
                <tr>
                    <td>请输入新密码：</td>
                    <td>
                        <input type="text" name="pwd" placeholder="请输入新密码" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button type="button" id="btn2">提交</button>
                    </td>
                </tr>

            </table>
        </form>
    </div>

</div>


</body>
</html>
